<div class="modal-content" data-test-modal="edit-newsletter">
    <div class="modal-body modal-fullsettings">
        <div class="modal-fullsettings-body gh-newsletters-labs">
            <div class="modal-fullsettings-sidebar-labs">
                <h2 class="modal-fullsettings-heading-labs">
                    {{if @data.newsletter.isNew "Create" "Edit"}} newsletter
                </h2>
                <div class="modal-fullsettings-body-labs">
                    <div class="modal-fullsettings-top">
                        <Modals::Newsletters::Edit::Settings @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
                        {{#if (feature 'makingItRain')}}
                            <Modals::Newsletters::Edit::DesignLabs @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
                        {{else}}
                            <Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
                        {{/if}}
                    </div>
                    <div class="modal-fullsettings-bottom">
                        <div class="modal-fullsettings-footer">
                            <GhFormGroup>
                                <div class="gh-members-emailsettings-promotelabel">
                                    <span>{{svg-jar "heart"}}</span>
                                    <div>
                                        <h4 class="modal-fullsettings-title">Promote independent publishing</h4>
                                        <p>Show you’re a part of the indie publishing movement with a small badge in the footer</p>
                                    </div>
                                </div>
                                <div class="for-switch small">
                                    <label
                                        class="switch"
                                        for="promote-ghost"
                                    >
                                        <input
                                            type="checkbox"
                                            checked={{@data.newsletter.showBadge}}
                                            id="promote-ghost"
                                            name="promote-ghost"
                                            {{on "click" (fn this.toggleSetting "showBadge")}}
                                        >
                                        <span class="input-toggle-component"></span>
                                    </label>
                                </div>
                            </GhFormGroup>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-fullsettings-main">
                <div class="modal-fullsettings-main-topbar-labs">
                    <button class="gh-btn mr3" type="button" {{on "click" @close}} data-test-button="cancel-newsletter">
                        <span>Cancel</span>
                    </button>

                    <GhTaskButton
                        @buttonText="Save and close"
                        @successText="Saved"
                        @task={{this.saveTask}}
                        @idleClass="gh-btn-primary"
                        @class="gh-btn gh-btn-icon"
                        {{on-key "cmd+s" this.saveViaKeyboard priority=1}}
                        data-test-button="save-newsletter"
                    />
                </div>
                {{#if (feature 'makingItRain')}}
                    <Modals::Newsletters::Edit::PreviewLabs @newsletter={{@data.newsletter}} />
                {{else}}
                    <Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
                {{/if}}
            </div>
        </div>
    </div>
</div>
